import React from "react";
import {Button, Form,Toast} from "@douyinfe/semi-ui";
import {UserControllerService,  UserRegistryRequest} from "../../../service";
const UserRegisterView:React.FC=()=>{
    const handleSubmit=async (values: UserRegistryRequest)=>{
        const res = await UserControllerService.userRegistry(values);
        if(!res.data){
            Toast.error("注册失败:"+res.message);
            return;
        }
        Toast.info({
            content:"注册成功"
        })
    }




    return (
    <div style={{
        width: "100%",
        height: "90%",
    }}>
        <div style={{
            position: "absolute",
            left:0,
            right:0,
            margin: "auto",
            width: "fit-content",
            textAlign: "center"
        }}>
            <h1>注册</h1>
            <Form style={{ width: 400 }} onSubmit={values=>{handleSubmit(values)}}>
                {({ formState, values, formApi }) => (
                    <>
                        <Form.Input field='userAccount' label='账号' style={{ width: '100%' }} placeholder='输入你的账号'></Form.Input>
                        <Form.Input field='userPassword' mode={"password"} label='密码' style={{ width: '100%' }} placeholder='输入你的密码'></Form.Input>
                        <Form.Input field='ensurePassword' mode={"password"} label='确认密码' style={{ width: '100%' }} placeholder='再次输入你的密码'></Form.Input>
                        {/*<Form.Checkbox field='agree' noLabel>I have read and agree to the terms of service</Form.Checkbox>*/}
                        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                            <p>
                                <span>Or</span><Button theme='borderless' style={{ color: 'var(--semi-color-primary)', marginLeft: 10, cursor: 'pointer' }}><a href={"/user/login"}>登录</a></Button>
                            </p>
                            <Button htmlType='submit' type="tertiary">注册</Button>
                        </div>
                    </>
                )}
            </Form>
        </div>

    </div>
    );
}
export default UserRegisterView;
